import React from 'react';
import { X, Award, Search } from 'lucide-react';

interface MedalUser {
  id: number;
  name: string;
  avatar: string;
  department: string;
  grantedAt: string;
}

interface Medal {
  id: number;
  name: string;
  icon: string;
  grantedUsers?: MedalUser[];
}

interface MedalUsersModalProps {
  medal: Medal;
  onClose: () => void;
}

export default function MedalUsersModal({ medal, onClose }: MedalUsersModalProps) {
  const [searchTerm, setSearchTerm] = React.useState('');

  const filteredUsers = medal.grantedUsers?.filter(user =>
    user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    user.department.toLowerCase().includes(searchTerm.toLowerCase())
  ) || [];

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
      <div className="bg-white rounded-lg w-full max-w-2xl mx-4 max-h-[90vh] flex flex-col">
        <div className="flex items-center justify-between p-4 border-b">
          <div className="flex items-center space-x-3">
            <span className="text-2xl">{medal.icon}</span>
            <h3 className="text-lg font-semibold text-gray-900">
              {medal.name} - 获得者名单
            </h3>
          </div>
          <button onClick={onClose}>
            <X className="w-6 h-6 text-gray-500" />
          </button>
        </div>

        <div className="p-4 border-b">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
            <input
              type="text"
              placeholder="搜索获得者..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
        </div>

        <div className="flex-1 overflow-y-auto p-4">
          {filteredUsers.length > 0 ? (
            <div className="space-y-4">
              {filteredUsers.map(user => (
                <div
                  key={user.id}
                  className="flex items-center justify-between p-4 bg-gray-50 rounded-lg"
                >
                  <div className="flex items-center space-x-4">
                    <img
                      src={user.avatar}
                      alt={user.name}
                      className="w-10 h-10 rounded-full"
                    />
                    <div>
                      <div className="font-medium text-gray-900">{user.name}</div>
                      <div className="text-sm text-gray-500">{user.department}</div>
                    </div>
                  </div>
                  <div className="text-sm text-gray-500">
                    获得时间：{user.grantedAt}
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="flex flex-col items-center justify-center py-12 text-gray-500">
              <Award className="w-12 h-12 mb-4" />
              <p>暂无获得者</p>
            </div>
          )}
        </div>

        <div className="flex justify-end p-4 bg-gray-50 rounded-b-lg">
          <button
            onClick={onClose}
            className="px-4 py-2 bg-white text-gray-700 rounded-lg hover:bg-gray-100"
          >
            关闭
          </button>
        </div>
      </div>
    </div>
  );
}